'use client';

import { useEffect, useState } from 'react';
import { useRouter, useParams } from 'next/navigation';
import { createClient } from '@/utils/supabase/client';

export default function TableRedirect() {
  const router = useRouter();
  const params = useParams();
  const tableId = params?.name as string;
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    if (tableId) {
      const fetchTableInfo = async () => {
        try {
          const supabase = createClient();
          const { data, error } = await supabase
            .from('tables')
            .select('label')
            .eq('id', parseInt(tableId, 10))
            .single();
          
          if (error) throw error;
          
          // Store the table name and expiration time (1 hour from now)
          const expirationTime = new Date().getTime() + 60 * 60 * 1000; // 1 hour in milliseconds
          
          localStorage.setItem('tableInfo', JSON.stringify({
            id: tableId,
            name: data?.label || `Маса ${tableId}`,
            expiresAt: expirationTime
          }));

          // Redirect to the menu page
          router.push('/menu');
        } catch (error) {
          console.error('Error fetching table info:', error);
          setError('Грешка при зареждане на информацията за масата.');
          
          // Still try to redirect with a fallback name
          localStorage.setItem('tableInfo', JSON.stringify({
            id: tableId,
            name: `Маса ${tableId}`,
            expiresAt: new Date().getTime() + 60 * 60 * 1000
          }));
          
          // Redirect after a short delay to show the error
          setTimeout(() => {
            router.push('/menu');
          }, 1500);
        } finally {
          setLoading(false);
        }
      };
      
      fetchTableInfo();
    }
  }, [tableId, router]);

  return (
    <div className="flex items-center justify-center min-h-screen bg-amber-50">
      <div className="text-center p-8 max-w-md">
        {loading ? (
          <>
            <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-orange-500 mx-auto mb-4"></div>
            <h1 className="text-2xl font-bold text-amber-800 mb-2">Масата се запазва...</h1>
            <p className="text-amber-700">Пренасочваме ви към менюто. Моля, изчакайте.</p>
          </>
        ) : error ? (
          <>
            <h1 className="text-2xl font-bold text-red-800 mb-2">Възникна грешка</h1>
            <p className="text-red-700 mb-4">{error}</p>
            <p className="text-amber-700">Пренасочваме ви към менюто...</p>
          </>
        ) : null}
      </div>
    </div>
  );
}